<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  async created() {
    const accessRoutes = await this.$store.dispatch(
      'permission/generateRoutes',
      ['admin']
    )
    accessRoutes.push({
      path: '*',
      redirect: '/404',
      hide: true
    })
    this.$router.addRoutes(accessRoutes)
  }
}
</script>
<style lang='scss'>
.contentWarpBox {
  padding: 0 10px;
}
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
.searchInfo {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  margin: 10px 0;
}
.pagination {
  padding: 3px 0;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.clearfix::before {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.clearfix {
  zoom: 1;
}

em {
  font-style: normal;
}

form {
  padding: 0 20px 0 0;
}

::-webkit-scrollbar {
  width: 6px !important;
  background-color: #fff !important;
}

::-webkit-scrollbar-track {
  background-color: #fff !important;
}

/*定义滑块，内阴影及圆角*/
::-webkit-scrollbar-thumb {
  background-color: #555;
}

::-webkit-scrollbar {
  width: 4px;
  height: 6px;
  background-color: #f4f4f4;
}

/*定义滚动条的轨道，内阴影及圆角*/
.warpBox {
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 40px;
}

.warpBox1 {
  padding: 30px;
}

* {
  margin: 0;
  padding: 0;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */
 {
  opacity: 0;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.menuitem_1 .el-submenu__icon-arrow {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

html,
#__nuxt,
#__layout,
body {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  min-width: 1366px;
  font-size: 12px;
  background: #f0f0f0;

  .el-divider__text,
  .el-link {
    font-weight: 500;
    font-size: 12px;
  }

  .el-table {
    font-size: 12px;
  }

  .el-table td {
    padding: 6px 0;
  }
}

body .el-table th.gutter {
  display: table-cell !important;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding-right: 8px;
}

a {
  color: #333;
}

aside,
#app,
aside > ul {
  height: 100%;
}

aside > ul {
  overflow-y: auto;
}

.main {
  height: calc(100% - 98px);
  position: absolute;
  right: 0;
  top: 98px;
  background: #f0f0f0;
  box-sizing: border-box;
}

.quickSelect {
  position: absolute;
  top: 56px;
}

header {
  width: 100%;
  background: #242f42;
  height: 56px;
}

.padding20 {
  padding: 20px;
}

.padding10 {
  padding: 10px;
}

.logo_warp_left {
  div {
    display: inline-block;
    line-height: 56px;
    padding-left: 15px;
  }

  .logo {
    color: #fff;
    font-size: 22px;

    img {
      vertical-align: middle;
      height: 38px;
      width: 38px;
      padding-right: 10px;
    }
  }

  .title {
    color: rgb(255, 150, 0);
  }
}

.logo_warp_right {
  color: #fff;
  line-height: 56px;

  i,
  span {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }
}

.el-menu-item {
  a,
  span {
    display: inline-block;
    color: #fff;
    width: 100%;
    height: 100%;
  }
}

.top_padding20 {
  padding: 20px 0 0 !important;
}

.top_margin10 {
  margin-top: 10px !important;
}

.marginRight3 {
  margin-right: 3px;
}

.user_headimg_round {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  vertical-align: middle;
}

.only_margin20 {
  margin: 20px 0 !important;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.specifically_topbar {
  position: relative;
  height: 30px;
  overflow: hidden;
  background: #fff;
  padding-right: 120px;
  box-shadow: 0 5px 10px #ddd;

  .success {
    border: 1px solid #409eff;
    background-color: #409eff;

    span {
      color: #fff;
    }
  }

  ul {
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    li {
      float: left;
      margin: 3px 5px 2px 3px;
      border-radius: 3px;
      font-size: 12px;
      overflow: hidden;
      cursor: pointer;
      height: 23px;
      line-height: 23px;
      border: 1px solid #e9eaec;
      background: #fff;
      padding: 0 5px 0 12px;
      vertical-align: middle;
      color: #666;
      transition: all 0.3s ease-in;

      span {
        float: left;
        max-width: 80px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 5px;
        color: #666;
      }

      i {
        font-family: element-icons !important;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
      }

      i:hover {
        color: red;
      }
    }

    li:hover {
      &:after {
        width: 100%;
        border: none;
        height: 2px;
        background-color: #292b34;
      }
    }
  }
}

.trans {
  z-index: 1001;
  width: 80%;
  position: absolute;
  top: 84px;
}

.closeRightBox {
  box-shadow: -2px 0 4px 2px rgb(225, 228, 231);
  right: 0px;
  transition: all 0.3s;
}

.openRightBox {
  right: -100%;
  transition: all 0.3s;
}

.blue {
  color: #409eff;
  cursor: pointer;
}
.blue:hover {
  color: red;
}

.closeRight {
  font-size: 22px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.closeRight:hover {
  color: red;
}

.pagination {
  position: absolute;
  bottom: -38px;
  right: 0;
  width: 100%;
  height: 38px;
  line-height: 38px;
  background: #fff;
}

.contentWarpBox {
  background: #fff;
  height: calc(100% - 48px);
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;

  .searchInfo {
    height: 38px;
  }
}

.box-card,
.head-box-card {
  background: #fff;
}

.box-card {
  overflow: auto;
}

.head-box-card {
  font-size: 16px;
  font-weight: 500;

  div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.padding20 {
  padding: 20px;
}

.height3 {
  height: 4px;
  background: #f0f0f0;
}

.top_cus_info {
  .el-col > p:first-of-type {
    color: rgb(142, 160, 177);
  }
}

.top_cus_info {
  margin-top: 10px;

  div {
    text-align: left;
    line-height: 30px;
  }
}

.remark {
  font-size: 14px;
  line-height: 28px;
}
._delete{
  cursor:pointer;
  color:#ff4949;
  margin-right: 15px;
}
._primary{
  cursor:pointer;
  color:#409eff;
  margin-right: 15px;
}
</style>

